<template>
  <div class="container">
    <header>
      <button class="sidebar-toggle" @click="$emit('toggle-sidebar')">☰</button>
      <h1>AI角色黑洞宇宙</h1>
    </header>
    <p class="subtitle">每个角色都是一个独特的黑洞，吸引着知识的粒子。点击进入他们的引力场，开始一场跨时空的对话。</p>

    <div class="characters-container">
      <CharacterBlackhole
        v-for="char in filteredCharacters"
        :key="char.initials"
        :character="char"
        @click="goToChat(char)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import CharacterBlackhole from '@/components/CharacterBlackhole.vue';
import { characters as allCharacters } from '@/data/characters';



defineEmits(['toggle-sidebar']);

const router = useRouter();
const store = useStore();
const searchTerm = ref('');

// 计算属性，用于根据搜索词过滤角色
const filteredCharacters = computed(() => {
    if (!searchTerm.value) {
        return allCharacters; // 如果搜索词为空，返回所有角色
    }
    return allCharacters.filter(char =>
        char.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
        char.description.toLowerCase().includes(searchTerm.value.toLowerCase())
    );
});

// 点击角色时跳转到聊天页面
const goToChat = (character) => {
  const session = store.getters['sessions/getSessionByInitials'](character.initials)
  router.push({ 
    name: 'Chat', 
    params: { 
      initials: character.initials, 
      sessionId: session?.sessionId 
    }
  })
}

</script>

<style scoped>
.no-results {
    text-align: center;
    padding: 3rem;
    color: #aaa;
}
</style>